<template>
	<view>
		<view class="cu-form-group" v-if="mode == 'input'">
			<view class="title">{{labelName}}<text class="lg text-gray cuIcon-question"></text></view>
			<input type="text" :name="path" :value="value" :placeholder="placeholder"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'number'">
			<view class="title">{{labelName}}<text class="lg text-gray cuIcon-question"></text></view>
			<input type="number" :name="path" :value="value" :placeholder="placeholder"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'idcard'">
			<view class="title">{{labelName}}<text class="lg text-gray cuIcon-question"></text></view>
			<input type="idcard" :name="path" :value="value" :placeholder="placeholder"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'digit'">
			<view class="title">{{labelName}}<text class="lg text-gray cuIcon-question"></text></view>
			<input type="digit" :name="path" :value="value" :placeholder="placeholder"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'date' || mode == 'time' || mode == 'datetime'" v-show="false">
			<view class="title">{{labelName}}</view>
			<input type="text" :name="path" :value="datetime" disabled></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'date' || mode == 'time' || mode == 'datetime'">
			<view class="title">{{labelName}}:</view>
			<picker mode="date" :value="date" start="1900-01-01" end="2099-12-31" @change="DateChange" v-if="mode == 'date' || mode == 'datetime'">
				<view class="picker">
					{{date}}
				</view>
			</picker>
			<picker mode="time" :value="time" start="00:00" end="23:59" @change="TimeChange" v-if="mode == 'time' || mode == 'datetime'">
				<view class="picker">
					{{time}}
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	// input输入绑定
	// input:number绑定
	// input:number小数限制两位
	// 日期时间选择控件
	export default {
		name: 'js-input',
		behaviors: ['uni://form-field-group'],
		data() {
			return {
				time: moment().format('hh:mm'),
				date: moment().format('yyyy-MM-DD')
			}
		},
		computed: {
			datetime() {
				if (this.mode == 'date') {
					return this.date
				} else if (this.mode == 'time') {
					return this.time
				} else if (this.mode == 'datetime') {
					return this.date + ' ' + this.time
				}

			}
		},
		mounted() {
			if(this.mode == 'date' && this.value){
				this.date = moment(this.value).format("YYYY-MM-DD")
			}
			if(this.mode == 'time' && this.value){
				this.time = moment(this.value).format("HH:mm")
			}
			if(this.mode == 'datetime' && this.value){
				this.date = moment(this.value).format("YYYY-MM-DD")
				this.time = moment(this.value).format("HH:mm")
			}
		},
		props: {
			// datetime date time input textarea number digit idcard
			mode: {
				type: String,
				default: 'input'
			},
			labelName: {
				type: String,
				default: ''
			},
			path: {
				type: String,
				default: ''
			},
			value:{
				type: String,
				default: ''
			},
			placeholder:{
				type: String,
				default: '请输入相关内容'
			}
		},
		methods: {
			DateChange: function(e) {
				this.date = e.target.value
			},
			TimeChange: function(e) {
				this.time = e.target.value
			}
		}
	}
</script>

<style>
	.cu-form-group{
		border-top:null;
		border-bottom:1rpx solid #eee;
	}
</style>
